Fully editable
Click on any cell to edit it by typing the new data into the input field or selecting any value from a drop-down list.
Sortable
Click on any header of a column to sort table items. You can use the DataTable sort function for specific sorting behaviour.
Filtering
Table items can be filtered with the help of built-in filters in column headers. You can use the JavaScript table filter function for a specific filtering pattern.
Validation
Using the validation feature, you can check whether the value in a particular cell of the table corresponds to the predefined rule. If it doesn't, the line with invalid data will be highlighted and a user will get a warning message.
Paging
Split a big data set into several pages with ease if necessary. Customizable numeric and directional controls provide easy navigation through available parts of the table.
Saving current state
To prevent users from losing the state of their operations, we've added a feature that allows saving the JS table state to cookies, local storage, or session storage and restoring it after a page reload.
JavaScript drag-and-drop table row
The 'order' mode allows you to define whether the items can or cannot be dragged out of the JS table boundaries. If you have two grids on the page, you can move items from one table to another, and the remaining items will be rearranged automatically. Advanced configuration allows you to deny dragging of specific items, disable dropping rows to specific positions, etc.
Drag and drop for columns
You can enable drag-and-drop for the columns of your JavaScript Table. You can enable the 'order' mode to disable dragging the columns out of the table boundaries.
Clipboard support
The Webix JS table library provides the ability to copy/paste data to and from the clipboard, so you can easily exchange the data between the tables. In addition, it is possible to paste DataTable data into an Excel document.
Resizable columns and rows
Column and row dimensions can be changed by dragging vertical and horizontal borders of the table cells.
Fixed areas
You can create a table JS with frozen areas that will preserve their position during scrolling.
TreeTable
JavaScript Table widget supports the display of tree-like structures, similar to what Tree offers. This TreeTable widget allows the creation of an unlimited number of nested expandable subtrees that add hierarchical structure to the table.
Besides standard selection modes (by cell, row or column), DataTable allows selecting by a specific cell area. You can click and drag across the cells to select a block of cells and use the Shift key to extend the selected area.
JavaScript data tables can be used with such complex editors as Multi-select editor, Grid Editor and DataView Editor. Multi-select editor allows selecting several options for the cell being edited, while Grid editor and DataView editors let you choose the necessary option from DataTable and DataView respectively.
With Webix JS DataTable advanced filtering functions you can edit data table contents by either selecting the appropriate option(s) from a dropdown list (rich-select, multi-select filters), or by entering the necessary date via the built-in calendar.
Thanks to rowspan and colspan functionality, you can present complex data in a readable form just like in HTML tables.
This built-in feature allows Webix DataTable users to expand or collapse multiple columns with a single click. You can define a group of columns yourself and then customize its behaviour.
Sparklines allow adding small graphs to the JavaScript Table widget. You can choose one of the available Sparkline types: Line, Area, Bar, Spline, SplineArea, or Pie. You can define tooltips that will appear on the screen when users move the cursor over the graph item. You can change the Sparklines appearance by setting a particular color for its items.
A DataTable row can be equipped with subrows or subviews that will be displayed below the related rows. You can use a template to define the contents of a subrow, while a subview can contain any Webix UI widget, even another JavaScript DataTable. You can collapse/expand subrows and subviews by clicking the icon in the parent row.
